<template>
    <div class="box">
        <span>欢迎登录 WELCOME</span>
        <div class="user-name">
            <span class="username"></span>
            <el-input placeholder="请输入用户名" v-model="userName" size="small"></el-input>
        </div>
        <div class="user-password">
            <span class="password"></span>
            <el-input placeholder="请输入密码" show-password v-model="password" size="small"></el-input>
        </div>
        <div class="rember">
            <el-checkbox v-model="remember">记住密码</el-checkbox>
            <el-checkbox v-model="autoLogin">自动登录</el-checkbox>
        </div>
        <div class="login">
            <el-button type="primary" @click='loginEvt' style="width: 100%">登录</el-button>
        </div>
        <span class="qr-code" @click="changeCom"></span>
    </div>
</template>
<script>
import { deCodeApi, enCodeApi, md5Api } from '../../utils'
import { JOIN,LOGIN_FLAG } from '../../config/common.conf'
import { autoCodeApi, autoLoginApi, getUserInfo, loginApi,getMenuListApi } from '@/apis/loginApi'

    export default {
        data(){
            return {
                userName: '',
                password: '',
                remember:false,
                autoLogin:false,
                autoLoginSuccess:false,
                hasLogin:true
            }
        },
        created(){
            // 之前登录是否选择记住密码
            let cache= localStorage.getItem('login-info')
            if(!!cache){
                try{
                    cache=deCodeApi(cache).split(JOIN)
                    this.userName=cache[0]
                    this.password=cache[1]
                    this.remember=true
                }catch{
                    localStorage.removeItem('login-info')
                }
            }

           
        },
        mounted(){
            this.$nextTick(this.auto())
        },
        methods:{
            async loginEvt(){
                let result=await loginApi({
                    id:this.userName,
                    password:md5Api(this.password)
                })

                if(result.code !==200){
                    this.$message.error('登录失败，原因：' + result.message)
                    return
                }

                // 登录成功同时获取用户的信息及菜单数据
                if(result.code === 200) {
                    getUserInfo(result.userid).then(d => {
                        if(d.code === 200) {
                            this.$store.commit('common/setUserInfo',d.data)
                        }
                    }),
                    getMenuListApi().then(d=>{
                        if(d.code === 200) {
                           this.$store.commit('common/setMenuList',d.data.rows)
                        }
                    })
                }

                //缓存登录标识
                console.log(result.token)
                sessionStorage.setItem(LOGIN_FLAG,enCodeApi(result.token + JOIN + Date.now()))
                this.$store.commit('common/setToken',result.token)

                if(this.autoLogin){
                    localStorage.setItem('auto-login',enCodeApi(result.token + JOIN + Date.now()))
                }else{
                    localStorage.removeItem('auto-login')
                }

                if(this.remember){
                localStorage.setItem('login-info',enCodeApi(this.userName+JOIN+this.password))
                }else{
                    localStorage.removeItem('login-info')
                }
                sessionStorage.setItem('hh','')
                setTimeout(()=>{
                    this.$router.push('/home')
                },500)
            },
            changeCom(){
                this.$parent.changeComponent = false
            },
            async auto(){
                // 是否自动登录
                let autoCache =localStorage.getItem('auto-login')
                if(!!autoCache){
                    try{
                        this.autoLogin=true
                        autoCache = deCodeApi(autoCache).split(JOIN)
                        let hasIn = (7 * 24 * 60 * 60 * 1000) - (Date.now() - autoCache[1]) > 0
                        if(hasIn){
                            this.$store.commit('common/setToken',autoCache[0])
                            let userauto = await autoCodeApi()
                            if(userauto.code ===200){
                                console.log(userauto.code)
                                this.$router.push('/home')
                            }else{
                                console.log(userauto)
                            }
                        }else{
                            this.hasLogin = false
                        }
                    }catch{
                        this.hasLogin = false
                    }
                }else{
                    this.hasLogin = false
                }
            }
        }
    }
</script>
<style lang="less" scoped>
@import '@/style/common.less';
     .box {
       position: absolute;
       width: 20rem;
       height: 15rem;
       background-color: #fff;
       left: calc(50% - 10rem);
       top: 50%;
       transform: translateY(-50%);
       border-radius: .5rem;
       padding: .5rem 2rem ;
       > span {
           display: block;
           width: 100%;
           padding: .5rem 2rem;
           font-size: 1.3rem;
       }
       > .user-name,
           .user-password {
               display: flex;
               width: 100%;
               height: 2rem;
               line-height: 2rem;
               padding: 0 2px;
               margin-bottom: 15px;
               border-bottom: 1px solid @gc05;
               :deep(.el-input__inner) {
                   border: 0 !important;
                   outline: none !important;
               }
           }
           > .rember {
               height: 2rem;
               text-align: center;
               line-height: 2rem;
               margin-bottom: 10px;
           }
       .password {
           flex: 0 0 2.4rem;
           background: url('@/images/password.png') center center / 30% no-repeat;
       }
       .username {
           flex: 0 0 2.4rem;
           background: url('@/images/username.png') center center / 30% no-repeat;
       }
       .qr-code {
                display: inline-block;
                width: 2rem;
                height: 2rem;
                position: absolute;
                top: -20px;
                right: -15px;
                background: url('@/images/erweima.png') center center / 100% no-repeat;
                padding: 0;
            }
    }
</style>